<template>

  <el-form :inline="true" :model="collSearch" class="demo-form-inline">
    <el-form-item label="院校名称">
      <el-input v-model="collSearch.colleges" placeholder="请输入院校名称" clearable></el-input>
    </el-form-item>
    <el-form-item label="院校所在地">
      <el-select v-model="collSearch.address" filterable placeholder="请选择">
        <el-option label="" :key="0" value="">全部</el-option>
        <el-option
            v-for="item in allAddress"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="院校类型">
      <el-select v-model="collSearch.colType" filterable placeholder="请选择">
        <el-option label="" :key="0" value="">全部</el-option>
        <el-option
            v-for="item in allColType"
            :key="item"
            :label="item"
            :value="item">
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="学历层次">
      <el-select v-model="collSearch.level" filterable placeholder="请选择">
        <el-option label="" :key="0" value="">全部</el-option>
        <el-option label="" :key="'本科'" value="本科">本科</el-option>
        <el-option label="" :key="'高职(专科)'" value="高职(专科)">高职(专科)</el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
  <el-table
      :data="tableData"
      border
      v-loading="loading"
      style="width: 100%">
    <el-table-column
        prop="colleges"
        label="院校名称"
        width="180">
    </el-table-column>
    <el-table-column
        prop="address"
        label="院校所在地"
        width="180">
    </el-table-column>
    <el-table-column
        prop="supDepart"
        label="教育行政主管部门">
    </el-table-column>
    <el-table-column
        prop="colType"
        label="院校类型">
    </el-table-column>
    <el-table-column
        prop="level"
        label="学历层次">
    </el-table-column>
    <el-table-column
        prop="topCol"
        label="一流大学建设高校">
      <template #default="scope">
        {{scope.row.topCol == 1? "✔": "✖"}}
      </template>
    </el-table-column>
    <el-table-column
        prop="topSub"
        label="一流大学建设高校">
      <template #default="scope">
        {{scope.row.topSub == 1? "✔": "✖"}}
      </template>
    </el-table-column>
    <el-table-column
        prop="satisfaction"
        label="满意度">
    </el-table-column>
  </el-table>

  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      v-model:currentPage="collSearch.current"
      :page-size="collSearch.size"
      layout="prev, pager, next, jumper"
      :total="collSearch.total">
  </el-pagination>
</template>

<script>
import {onBeforeMount, reactive, toRefs} from "vue";
import {collInfo, pages} from "@/api/coll";

export default {
  name: "index",
  setup(){

    const data = reactive({
      loading: false,
      tableData: [],
      collSearch: {
        colleges: '',
        address: '',
        colType: '',
        level: '',
        current: 1,
        size: 10,
        total: 100
      },
      allAddress: [],
      allColType: []
    })

    const onSubmit = () => {
      data.loading = true
      pages(data.collSearch).then(res => {
        data.tableData = res.data.records;
        data.collSearch.total = res.data.total
        data.loading=false
      })
    }

    const handleSizeChange = (val) => {
    }

    const handleCurrentChange = (val) => {
      data.collSearch.current = val;
      data.loading = true
      pages(data.collSearch).then(res => {
        data.tableData = res.data.records;
        data.collSearch.total = res.data.total
        data.loading=false
      })
    }

    onBeforeMount(() => {
      collInfo().then(res => {
        data.allAddress = res.data.address
        data.allColType = res.data.colType
      })

      data.loading = true
      pages(data.collSearch).then(res => {
        data.tableData = res.data.records;
        data.collSearch.total = res.data.total
        data.loading=false
      })
    })

    return {
      ...toRefs(data),
      onSubmit,
      handleCurrentChange,
      handleSizeChange
    }
  }
}
</script>

<style scoped>

</style>
